<template>
	<view class="discussion">
		<view class="imgs">
			<view class="img" v-for="(item, index) in iconPath" :key="index">
				<image :src="item" alt="" />
			</view>
			<input type="image" src="path/to/your/plus-icon.png" alt="" @click="chooseImage" placeholder="+" />
		</view>

		<textarea name="" id="" maxlength="-1" focus auto-height adjust-position placeholder="请输入"></textarea>
		<input class="button" type="button" value="发表" />
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	const iconPath = ref([]); // 用于存储多张图片的路径

	function chooseImage() {
		// 选择图片
		uni.chooseImage({
			count: 9, // 限制最多选择9张图片
			sizeType: ['compressed'], // 可以选择压缩图片
			sourceType: ['album', 'camera'], // 从相册或相机选择
			success: (res) => {
				// 将新选择的图片合并到 iconPath 中
				iconPath.value.push(...res.tempFilePaths);
				uni.showToast({
					title: '图片选择成功',
					icon: 'success',
					duration: 1000,
				});
			},
			fail: () => {
				uni.showToast({
					title: '图片选择失败',
					icon: 'none',
					duration: 1500,
				});
			}
		});
	}
</script>

<style scoped lang="scss">
	.discussion {
		padding: 1rem;

		.imgs {
			display: flex;
			flex-wrap: wrap; // 允许换行

			.img {
				width: 23%;
				margin: 1%;
				aspect-ratio: 1;
				overflow: hidden;

				image {
					// height: 100%;
				}
			}

			input {
				width: 5.1rem;
				height: 5.1rem;
				margin: 1%;
				text-align: center;
			}
		}
		textarea{
			margin: 1%;
			min-height: 4rem;
		}
		.button{
			width: 3rem;
			height: 1.5rem;
			border: 0.1rem solid gray;
			border-radius: 0.5rem;
			text-align: center;
			position: fixed;
			bottom: 5rem;
			right: 1rem;
		}
	}
</style>